<template>
    <div class="body_login">
            <div class="login_deng">
                    <h3>登录</h3>
                    <el-input placeholder="用户名" size='small' v-model="input1" show-text>
                        <template slot="prepend"><i class="el-icon-s-custom"></i></template>
                    </el-input>
                    <el-input placeholder="请输入密码" size='small' v-model="password1" show-password>
                        <template slot="prepend"><i  class="el-icon-key"></i></template>
                    </el-input>
                    <el-button type="primary" size='medium' @click="postData">登录</el-button>
            </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                input1: '',
                password1:'',
                data:[],
            }
        },
        methods:{
            postData(){
                let hao  = `rname=${this.input1}&rpwd=${this.password1}`
                let url = `admin`
                this.axios.post(url,hao).then(res=>{
                    console.log(res.data);
                    if(res.data.code == 200){   
                       return this.$router.push('/index/page')
                    }else{
                        alert('账号密码错误')
                    }
                })
            }
        }




    }
</script>

<style lang="scss" scoped>

    .body_login{
        width: 100%;
        height: 100vh;
        background-image: url(../assets/1665030144461.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position:relative;
        .login_deng{
            width: 370px;
            background-color: #d9d9d9;
            position: relative;
            transform: translate(-50%,-50%);
            left: 50%;
            top:48%;
            border-radius: 7px;
            box-shadow: 0px 1px 10px 3px #989797;
            padding: 20px;
            >h3{
                line-height: 60px;
                text-align:center;
                font-size: 22px;
            }
            .el-button{
                width: 100%;
                margin: 20px 0;
            }
            .el-input{
                margin-top: 20px;
            }
            .el-icon-s-custom{
                font-size: 18px;
                padding: 0px ;  
            }
            .el-icon-key{
                font-size: 18px;
            }
        }
    }
</style>